// 目录: src/components/TagInputComponent.js

import React, { useState, useRef } from 'react';
import Chip from '@mui/material/Chip';
import TextField from '@mui/material/TextField';
import Autocomplete from '@mui/material/Autocomplete';

const TagInputComponent = () => {
  // 状态管理：用于跟踪标签和输入框的内容
  const [tags, setTags] = useState([]);
  const [inputValue, setInputValue] = useState(''); // 用于跟踪用户手动输入的内容
  const [open, setOpen] = useState(false); // 用于控制下拉列表的显示和隐藏
  const [customInputValue, setCustomInputValue] = useState(''); // 用于自定义输入框值
  // 使用 ref 来跟踪输入框和下拉列表的 DOM 元素
  const inputRef = useRef(null);
  const listboxRef = useRef(null);

  // 下拉列表中的可选标签
  const availableTags = ['标签1', '标签2', '标签3', '标签4'];

  // 动态添加标签
  const addTag = (tag) => {
    if (tag && !tags.includes(tag)) {
      setTags([...tags, tag]);
      console.log('动态添加标签', tag); // 输出新添加的标签
    }
  };

  // 动态删除标签
  const removeTag = (index) => {
    const newTags = [...tags];
    newTags.splice(index, 1);
    setTags(newTags);
    console.log('动态删除标签', newTags); // 输出删除后的标签列表
  };

  // 监听全局点击事件，用于控制下拉列表的显示和隐藏
  const handleGlobalClick = (event) => {
    if (inputRef.current.contains(event.target) || (listboxRef.current && listboxRef.current.contains(event.target))) {
      setOpen(true);
    } else {
      setOpen(false);
    }
    // console.log('全局点击事件', event.target); // 输出点击的元素
  };
  // 当TextField内容改变时，更新状态
  const handleChange = (event) => {
    console.log('输入框handleChange', event.target.value);
    // setTextValue(event.target.value);
  };

  // 在组件挂载时添加全局点击事件监听器
  React.useEffect(() => {
    document.addEventListener('click', handleGlobalClick);
    return () => {
      document.removeEventListener('click', handleGlobalClick);
    };
  }, []);

  return (
    <div style={{ display: 'flex', alignItems: 'center', flexWrap: 'wrap' }}>
      {tags.map((tag, index) => (
        <Chip key={index} label={tag} onDelete={() => removeTag(index)} />
      ))}
      <Autocomplete
        options={availableTags}
        freeSolo
        value={customInputValue} // 使用 customInputValue 控制输入框值
        open={open}
        filterOptions={(options) => options}
        onInputChange={(event, newInputValue, reason) => {
          if (reason === 'input') {
            setInputValue(newInputValue);
          }
          console.log('用户手动输入的内容', newInputValue, reason); // 输出用户输入的内容
        }}
        onChange={(event, newValue) => {
          //   addTag(newValue);
          //   setInputValue(inputValue);
          console.log('用户输入的内容inputValue', inputValue); // 输出从下拉列表中选择的内容
          console.log('用户输入的内容customInputValue', customInputValue); // 输出从下拉列表中选择的内容
          // 如果值发生了变化
          //   if (customInputValue != inputValue) {
          setCustomInputValue(newValue);
          //   }

          console.log('用户输入的内容customInputValue2', customInputValue); // 输出从下拉列表中选择的内容

          console.log('下拉列表选中的内容', newValue); // 输出从下拉列表中选择的内容
        }}
        renderInput={(params) => (
          <TextField
            {...params}
            placeholder="选择标签"
            style={{ width: '200px' }}
            ref={inputRef}
            value={customInputValue}
            onChange={handleChange}
          />
        )}
        ListboxProps={{ ref: listboxRef }}
      />
      {/* <button onClick={() => alert(summarizeContent())}>汇总内容</button> */}
    </div>
  );
};

export default TagInputComponent;
